<template>
  <div class="ele-form">
    <h1>售后管理</h1>
    <div class="box1">
      <div class="box">
        <a class="btn btn1" @click="do1">售后</a>
      </div>
    </div>
    <div class="box1">
      <div class="box">
        <a class="btn btn1" @click="do2">查询延迟交付</a>
      </div>
    </div>
    <div class="box1">
      <div class="box">
        <a class="btn btn1" @click="do3">完成延迟交付</a>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Index",
      data () {

      },
      mounted() {
          const user = this.$store.getters.getLoginUser;
          if (user == null) {
            this.$router.push({name: "Login"})
          }
      },
      methods: {
          do1() {
            this.$router.push({name: "BeforeSales"})
          },
          do2() {
            this.$router.push({name: "CheckADelayInDelivery"})
          },
        do3() {
            this.$router.push({name: "FinishADelayInDelivery"})
        }
      }
    }
</script>

<style lang="scss" scoped>
  .ele-form {
    opacity: 90%;
    width: 85%;
    max-width: 600px;
    background: #f1f1f1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px 40px;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    box-shadow: 0 0 20px #000000b3;
    h1 {
      margin-top: 0;
      font-weight: 200;
    }
    .txtb {
      border: 1px solid gray;
      margin: 8px 0;
      padding: 12px 18px;
      border-radius: 8px;
      label {
        display: block;
        text-align: left;
        color: #333;
        text-transform: uppercase;
        font-size: 14px;
      }
      input, select {
        width: 100%;
        border: none;
        background: none;
        outline: none;
        font-size: 18px;
        margin-top: 6px;
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      input[type="number"]{
        -moz-appearance: textfield;
      }
    }
    .box1 {
      position: relative;
      background: #2d3436;
      margin-top: 8px;
      padding: 14px 0;
      .box {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #ff7675;
        .btn {
          height: 100%;
          width: 100%;
          position: relative;
          font-size: 16px;
          display: inline-block;
          /*background: #9b59b6;*/
          cursor: pointer;
          color: white;
          padding: 0;
          margin: 0;
          text-transform: uppercase;
          text-decoration: none;
          overflow: hidden;
          transition: 1s all ease;
        }
        .btn::before {
          background: #ff7675;
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: -1;
          transition: all 0.6s ease;
        }
        .btn1::before {
          width: 0;
          height: 100%;
        }
        .btn:hover::before{
          width: 100%;
        }
      }
    }

  }
</style>
